<template>
<div class="card rdsp-card-view" data-page="hiddenCheck_org">
	<div class="card-content rank-content card-content-padding">
		<div class="rdsp-card-title">
		    <span>隐患整改</span>
		</div>
		<div class="hiddenCheck-top">
			<div @click="showKeyList(4)">
				<span class="one" id="hiddenCheck_time_num_{{getNewId}}">0</span>
				<p>今日提报</p>
			</div>
			<div @click="showKeyList(2)">
				<span class="two" id="hiddenCheck_noDeal_num_{{getNewId}}">0</span>
				<p>今日完成</p>
			</div>
			<div @click="showKeyList(4)">
				<span class="three" id="hiddenCheck_todayDeal_num_{{getNewId}}">0</span>
				<p>较大级别以上</p>
			</div>
		</div>
		<div class="hiddenCheck-body">
			<div class="hiddenCheck-body-status">
				<div class="status-icon status-start">
					<span>提报</span>
				</div>
				<div class="status-icon status-end">
					<span>完成</span>
				</div>
			</div>
			<div class="hiddenCheck-body-direction">
				<div class="direction-icon direction-down"></div>
				<div class="direction-icon direction-up"></div>
			</div>
			<div class="hiddenCheck-body-quatity">
				<div style="display: inline-block;text-align: center;">
					<div class="quatity-num quatity-assign" @click="showKeyList(4)">
					    <span id="assign_{{getNewId}}">0</span>
				    </div>
				    <p>待指派</p>
				</div>
				<div style="display: inline-block;float: right;text-align: center;">
					<div class="quatity-num quatity-verify" @click="showKeyList(1)">
						<span id="verify_{{getNewId}}">0</span>
				    </div>
				    <p>核实中</p>
				</div>
			</div>
			<div class="hiddenCheck-body-dobbleRir">
				<div class="dobbleRir-icon dobbleRir-left"></div>
				<div class="dobbleRir-icon dobbleRir-right"></div>
			</div>
			<div class="hiddenCheck-body-rectificatio">
				<div class="quatity-num quatity-rectificatio" @click="showKeyList(0)">
					<span id="rectificatio_{{getNewId}}">0</span>
				</div>
				<p>整改中</p>
			</div>
		</div>
	</div>
</div>
</template>
<script>
	return {
		data : function() {
			return {
				getNewId: (new Date()).getTime()
			}
		},
		methods : {
			showRistList : function(type) {
				app.router.navigate("/troubleApply/" + type + "/");
			},
			getHiddenData : function() {
				var self = this;
				var id_org = "";
				if (single_Orgid == "") {
					id_org = userInfor.organizationIds;
				} else {
					id_org = single_Orgid;
				}
				Dao.getHiddenManagerStatistics({
					userName : userInfor.accountName,
					deviceId : appKeyObj.deviceId,
					orgIds : id_org
				}, function(data) {
					if (data.continueNum > 99) {
						$("#rectificatio_" + self.getNewId).empty().html("99<sup>+</sup>");
					} else {
						$("#rectificatio_" + self.getNewId).empty().html(data.continueNum || 0);
					}
					if (data.checkedNum > 99) {
						$("#verify_" + self.getNewId).empty().html("99<sup>+</sup>");
					} else {
						$("#verify_" + self.getNewId).empty().html(data.checkedNum || 0);
					}
					if (data.assignNum > 99) {
						$("#assign_" + self.getNewId).empty().html("99<sup>+</sup>");
					} else {
						$("#assign_" + self.getNewId).empty().html(data.assignNum || 0);
					}
					jQuery("#hiddenCheck_time_num_" + self.getNewId).html(data.todayCreate || 0);
        			jQuery("#hiddenCheck_noDeal_num_" + self.getNewId).html(data.todayFinish || 0);
        			jQuery("#hiddenCheck_todayDeal_num_" + self.getNewId).html(data.dangerCount || 0);
				});
			},
			
			showKeyList:function(flag) {
				app.router.navigate("/troubleApply/"+flag+"/");
			}
		},
		on : {
			pageInit : function(e, page) {
				var arr = jQuery(".nobg");
				var interval = (window.screen.width - 48 - 46 * 7) / 6;
				if (interval < 0) {
					var width = (36 + 2 * interval);
					for (var i = 0; i < arr.length; i++) {
						arr[i].setAttribute('style', 'width: ' + width + 'px !important');
					}
				} else {
					for (var i = 0; i < arr.length; i++) {
						arr[i].setAttribute('style', 'padding-left:' + interval + 'px;padding-right:' + interval + 'px;');
					}
				}
			},
			pageAfterIn : function(e, page) {
				var self = this;
				self.getHiddenData();
			}
		}
	}
</script>
<style scoped>
	.hiddenCheck-top {
		padding-top: 20px;
	}

	.hiddenCheck-top div {
		width: 33%;
	    height: 100%;
	    float: left;
	    text-align: center;
	    color: rgba(68, 68, 68, 1);
    }

    .hiddenCheck-top .one {
    	color: rgba(250, 124, 90, 1);
    }

    .hiddenCheck-top div span {
    	font-size: 24px;
    }

    .hiddenCheck-top div p {
    	font-size: 14px;
    	font-weight: 400;
    	color: rgba(153, 153, 153, 1);
    }

    .hiddenCheck-body {
    	margin-top: 50px; 
    	padding-top: 30px;
    	position: relative;
    	height: 200px;
    }

    .status-icon {
    	background: url('./img/kanban/hiddenCheck/status-icon.png') no-repeat;
    	background-size: 100% 100%;
    	width: 75px;
    	height: 35px;
    	display: inline-block;
    	text-align: center;
    	line-height: 35px;
    	font-size: 14px;
    	font-weight: 400;
    	color: rgba(46,118,202,1);
    }

    .status-end {
    	float: right;
    }
    .hiddenCheck-body-quatity {
    	margin: 0px 10px;
    }
    .direction-icon {
    	height: 30px;
    	width: 25px;
    	display: inline-block;
    	margin-top: 8px;
    }
    .direction-down {
    	background: url('./img/kanban/hiddenCheck/down-icon.png') no-repeat;
    	background-size: 100% 100%;
    	margin-left: 25px;
    }
    .direction-up {
    	background: url('./img/kanban/hiddenCheck/up-icon.png') no-repeat;
    	background-size: 100% 100%;
    	float: right;
    	margin-right: 25px;
    }
    .quatity-num {
    	width: 60px;
    	height: 60px;
    	border-radius: 50%;
    	text-align: center;
        line-height: 60px;
        font-size: 19px;
        font-weight: 400;
        color: #fff;
    }
    .quatity-assign {
    	background: url('./img/kanban/hiddenCheck/assign.png') no-repeat;
    	background-size: 100% 100%;
    }
    .quatity-verify{
    	background: url('./img/kanban/hiddenCheck/verify.png') no-repeat;
    	background-size: 100% 100%;
    	float: right;
    }
    .quatity-rectificatio {
    	background: url('./img/kanban/hiddenCheck/rectification.png') no-repeat;
    	background-size: 100% 100%;
    	display: inline-block;
    }
    .hiddenCheck-body-dobbleRir {
    	width: 50%;
    	margin-left: 25%;
    	position: absolute;
        top: 150px;
    }
    .dobbleRir-icon {
    	display: inline-block;
    	width: 25px;
    	height: 35px;
    }
    .dobbleRir-left{
    	background: url('./img/kanban/hiddenCheck/left-icon.png') no-repeat;
    	background-size: 100% 100%;
    	transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg); /* IE 9 */
	    -moz-transform: rotate(-45deg); /* Firefox */
	    -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
	    -o-transform: rotate(-45deg); /* Opera */
	    margin-top: 5px;
        margin-left: 5px;
    }
    .dobbleRir-right{
    	float: right;
    	background: url('./img/kanban/hiddenCheck/right-icon.png') no-repeat;
    	background-size: 100% 100%;
    	transform: rotate(45deg);
	    -ms-transform: rotate(45deg); /* IE 9 */
	    -moz-transform: rotate(45deg); /* Firefox */
	    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
	    -o-transform: rotate(45deg); /* Opera */
	    margin-right: 5px;
	    margin-top: 5px;
    }
    .hiddenCheck-body-rectificatio {
    	text-align: center;
    	position: absolute;
    	left: 0;
    	margin: 0 auto;
    	right: 0;
    	top: 150px;
    }
    p {
    	font-size:12px;
    	font-family:PingFangSC-Regular;
    	font-weight:400;
    	color:rgba(153,153,153,1);
    }
</style>